<template>
	<div class="flight-table-container">
		<h2>航班信息表</h2>

		<!-- 查询条件 -->
		<div class="search-container">
			<el-form :inline="true" :model="searchForm" class="search-form">
				<el-form-item label="始发地：">
					<el-select style="width: 200px;" v-model="searchForm.startCity" placeholder="请选择始发地" clearable>
						<el-option v-for="city in cities" :key="city.cityid" :label="city.cityname"
							:value="city.cityid" />
					</el-select>
				</el-form-item>

				<el-form-item label="目的地：">
					<el-select style="width: 200px;" v-model="searchForm.endCity" placeholder="请选择目的地" clearable>
						<el-option v-for="city in cities" :key="city.cityid" :label="city.cityname"
							:value="city.cityid" />
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="handleSearch">查询</el-button>
					<el-button @click="handleReset">查询全部数据</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 航班表格 -->
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="flightid" label="ID" width="60" />
			<el-table-column prop="flightnum" label="航班号" width="120" />
			<el-table-column prop="flydate" label="飞行日期" width="120" />
			<el-table-column prop="starttime" label="飞行时间" width="120" />
			<el-table-column prop="bcityname" label="开始城市" width="120" />
			<el-table-column prop="ccityname" label="结束城市" width="120" />
			<el-table-column prop="seatnum" label="座位数" width="100" />
			<el-table-column label="操作" width="*%">
				<template #default="scope">
					<el-button size="small" @click="handleEdit(scope.row)">编辑航班信息</el-button>
					<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除航班信息</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="pagination">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
				:page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import axios from 'axios';

	// 查询表单
	const searchForm = reactive({
		startCity: '',
		endCity: ''
	})

	function initdata() {
		axios.get("http://localhost:8080/getflightinfo/1/10").then(function(res) {
			console.log(res.data)
			if(res.data.code==200){
				tableData.value = res.data.data.pagedata.list
				total.value = res.data.data.pagedata.total
				pageSize.value = res.data.data.pagedata.pageSize
			}else{
				ElMessage.error('查询失败:'+res.data.errormessage)
			}
		}).catch(function(res) {
			console.log(res)
		})
	}

	onMounted(() => {
		initdata()
	})


	// 表格数据
	const tableData = ref([
		// 	{
		// 	"startcity": 1,
		// 	"ccityname": "广州",
		// 	"flightnum": "h2000",
		// 	"seatnum": 100,
		// 	"flytime": "2",
		// 	"bcityid": 1,
		// 	"flightid": 1,
		// 	"starttime": "11:02",
		// 	"bcityname": "长沙",
		// 	"endcity": 2,
		// 	"flydate": "2025-03-27",
		// 	"ccityid": 2
		// },
	])

	// 城市数据
	const cities = ref([{
		cityid: 1,
		cityname: '天津'
	}])

	// 分页相关
	const currentPage = ref(1)
	const pageSize = ref(10)
	const total = ref(5)

	// 查询方法
	const handleSearch = () => {
		// 这里应该是调用API查询的逻辑
		ElMessage.success('查询成功')
		console.log('查询条件:', searchForm)
		axios.get("http://localhost:8080/getflightinfo/1/10", {
			params: searchForm
		}).then(function(res) {
			tableData.value = res.data.data.pagedata.list
			total.value = res.data.data.pagedata.total
			pageSize.value = res.data.data.pagedata.pageSize
			console.log(res.data)
		}).catch(function(res) {

		})
	}

	// 重置查询
	const handleReset = () => {
		searchForm.startCity = ''
		searchForm.endCity = ''
		// 这里应该是调用API获取全部数据的逻辑
		ElMessage.success('已重置查询条件')
	}

	// 编辑航班
	const handleEdit = (row) => {
		console.log('编辑:', row)
		ElMessageBox.prompt('请输入新的航班号', '编辑航班信息', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			inputValue: row.flightNum
		}).then(({
			value
		}) => {
			row.flightNum = value
			ElMessage.success('修改成功')
		}).catch(() => {
			ElMessage.info('取消编辑')
		})
	}

	// 删除航班
	const handleDelete = (row) => {
		ElMessageBox.confirm(`确定要删除航班 ${row.flightNum} 吗?`, '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			// 这里应该是调用API删除的逻辑
			tableData.value = tableData.value.filter(item => item.id !== row.id)
			ElMessage.success('删除成功')
		}).catch(() => {
			ElMessage.info('已取消删除')
		})
	}

	// 分页方法
	const handleSizeChange = (val) => {
		pageSize.value = val
		// 这里应该是调用API获取新数据的逻辑
		console.log(`每页 ${val} 条`)
	}

	const handleCurrentChange = (val) => {
		currentPage.value = val
		// 这里应该是调用API获取新数据的逻辑
		console.log(`当前页: ${val}`)
	}

	function initcities() {
		//城市数据
		axios.get("http://localhost:8080/getallcity").then(function(res) {
			cities.value = res.data
			console.log(res.data)
		}).catch(function(res) {

		})
	}

	onMounted(() => {
		// 这里可以初始化加载数据
		initcities(); //初始化城市数据
	})
</script>

<style scoped>
	.flight-table-container {
		padding: 20px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	h2 {
		text-align: center;
		margin-bottom: 20px;
	}

	.search-container {
		margin-bottom: 20px;
	}

	.search-form {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.pagination {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
	}
</style>